<template>
	<div v-if="show">
		<div class="shop-btn" @click="toLink">
			<span>优选</span>
			<span>订单</span>
		</div>

		<div class="shop-kefu-btn" @click="toKFLink">
			<img src="@/assets/2/icon/kefu.png" />
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
export default {
	props: {
		current: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	computed: {
		show() {
			return this.current.value == 'shop';
		}
	},
	created() {
		(function(w, d, n, a, j) {
			w[n] =
				w[n] ||
				function() {
					(w[n].a = w[n].a || []).push(arguments);
				};
			j = d.createElement('script');
			j.async = true;
			j.src = 'https://qiyukf.com/script/e2047b4addc24634df6b8ee6bc56725c.js';
			d.body.appendChild(j);
		})(window, document, 'ysf');
	},
	methods: {
		toLink() {
			this.$hmt.push('优选订单点击事件', '打开优选订单');

			this.$service.common.common.selfmallLogin().then(res => {
				res.expires_time = moment(res.expires_time).unix();
				location.href = `${this.$selfUrl}/order/list/0?token=${res.token}&expires_time=${res.expires_time}`;
			});
		},

		toKFLink() {
			window.ysf('open');
		}
	}
};
</script>

<style lang="scss" scoped>
.shop-btn,
.shop-kefu-btn {
	position: fixed;
	right: 30px;
	z-index: 999;
	border-radius: 100px;
	height: 80px;
	width: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.shop-btn {
	bottom: 380px;
	background-color: #666;
	color: #fff;

	span {
		display: inline-block;
		text-align: center;
		line-height: 30px;
		width: 30px;
	}
}

.shop-kefu-btn {
	bottom: 285px;
	border-color: #fff;
	background-color: #fff;

	img {
		height: 60px;
		width: 60px;
	}
}
</style>
